前言

CSS可用來製作簡單的動畫，效能會比JS好很多。

屬性

animation-delay

設定動畫讀取完畢再到開始時的延遲時間，有時候不想讓動畫這麼快開始就會使用這個屬性。

animation-direction

設定動畫的執行方向

animation-direction: normal; //順向執行~
animation-direction: reverse; //反向執行
animation-direction: alternate; //順向,動畫結束前一刻反向執行回來
animation-direction: alternate-reverse; //反向執行，動畫結束前一刻順向執行回來

animation-duration

設定一個動畫完整周期的時間

animation-iteration-count

設定動畫執行次數，預設為一次。

animation-iteration-count : infinite; //無限
animation-iteration-count : 3 ; //執行三次

animation-name

設定使用哪一個動畫，需搭配 @key-frames

animation-name : rotate; //rotate是key-frames的名稱

key-frames 關鍵影格

可定義元素在哪一個時間點要做什麼動畫。
from = 一開始元素的效果
to = 結束之後元素的效果
過程中keyframes rotate 就會使元素旋轉360度

@keyframes rotate {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

此外還可使用百分比的方式設定在哪一個時間點為元素添加動畫
動畫時間0~50%先轉50度，50%~100%元素轉了310度~

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  50%{
    transform: rotate(50deg);
  }
  100% {
    transform: rotate(360deg);
  }
}